<template>
  <div>
    <p>
      clicked: {{ $store.state.count }} times, count is
      {{ $store.getters.isOddOrEven }}
    </p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    console.log(this);
  },
  methods: {
    increment() {
      // 触发vuex中数据更新
      // dispatch --> actions --> commit --> mutations --> 修改vuex的state数据 --> 渲染组件
      this.$store.dispatch("increment"); // 触发increment action函数
    },
    decrement() {
      this.$store.dispatch("decrement");
    },
    incrementIfOdd() {
      this.$store.dispatch("incrementIfOdd");
    },
    incrementAsync() {
      this.$store.dispatch("incrementAsync");
    },
  },
};
</script>

<style>
</style>